<template>
  <div class="OrderConfirmation">
    <CommonHeader title="订单确认">
      <template #left>
        <div>
          <Icon name="zuojiantou"></Icon>
          <span>返回</span>
        </div>
      </template>
    </CommonHeader>
    <!-- 订单确认信息 -->
    <div class="order_confirmation_info" @click="goAddressList">
      <div class="icon">
        <Icon name="wodedangxuan"></Icon>
      </div>
      <!-- 没有联系人显示的 + 号 -->
      <!-- <div class="icon add_btn">
        <Icon name="add" color="#fff" size="25px"></Icon>
      </div> -->
      <div class="info">
        <div class="author">
          <span>作者：</span>
          <span>{{ addressInfo.username }}</span>
        </div>
        <div class="phone">
          <span>电话：</span>
          <span>{{ addressInfo.userphone }}</span>
        </div>
      </div>
      <!-- 没有联系人显示的  新增收获地址 -->
      <!-- <div class="address">
        <span>新增收获地址</span>
      </div> -->

      <div class="icon arrow">
        <Icon name="youjiantou"></Icon>
      </div>
    </div>
    <!-- card -->
    <div class="card_list">
      <div class="card_list_item" v-for="item in orderList" :key="item.id">
        <div class="img">
          <img :src="item.img" alt="" />
        </div>
        <div class="info">
          <div class="name">{{ item.goodsname }}</div>
          <div class="desc">{{ item.desc ? item.desc : '商品描述' }}</div>
          <div class="price">¥{{ item.price }}</div>
          <div class="num">x{{ item.num }}</div>
        </div>
      </div>
    </div>
    <!-- 底部 -->
    <div class="footer">
      <div class="total">
        <span>合计：</span>
        <span class="total_price">¥{{ totalPrice }}</span>
      </div>
      <div class="btn" @click="goPaymentPage">
        <span>提交订单</span>
      </div>
    </div>
  </div>
</template>

<script>
import CommonHeader from '@/components/common/publicHeader/index.vue';

import Icon from '@/components/common/Icon/index.vue';
import { orderSubmitAPI } from '@/api/cart';

export default {
  components: {
    CommonHeader,
    Icon,
  },
  data() {
    return {
      orderList: [],
      addressInfo: {
        username: '张三',
        userphone: '13800000000',
      },
      // paramsData: {}, //这是提交订单的参数
    };
  },
  mounted() {
    this.getOrderList();
  },
  methods: {
    goAddressList() {
      this.$router.push({
        name: 'addressList',
        query: {
          list: JSON.stringify(this.orderList),
        },
      });
    },
    // 订单列表
    async getOrderList() {
      // 从本地存储获取购物车列表
      const cartList = JSON.parse(localStorage.getItem('cartList'));
      // 如果cartList 有map方法 则使用map方法
      if (cartList && cartList.map) {
        this.orderList = cartList.map(item => ({
          ...item,
        }));
      }
      // 从本地存储获取作者信息
      const authorInfo = JSON.parse(localStorage.getItem('authorInfo'));
      this.addressInfo = {
        username: authorInfo.username,
        userphone: authorInfo.userphone,
      };
    },
    // 跳转支付页
    goPaymentPage() {
      // 总价
      localStorage.setItem('totalPrice', this.totalPrice);
      // 跳转的时候发送请求
      this.submitOrder();
    },
    // 提交订单
    async submitOrder() {
      // 循环数组 收集id
      let idstr = this.orderList.map(item => item.id).join(',');
      // 收集数组的 num总和
      let countmoney = this.orderList.reduce(
        (pre, cur) => pre + cur.price * cur.num,
        0
      );
      // 求总数
      let countnumber = this.orderList.reduce((pre, cur) => pre + cur.num, 0);
      const { uid } = JSON.parse(localStorage.getItem('userinfo'));
      const paramsData = {
        uid,
        countmoney,
        countnumber,
        addressid: localStorage.getItem('selectedAddressId'),
        idstr,
      };
      let res = await orderSubmitAPI(paramsData);
      const {
        list: { outTradeNo },
      } = res;
      console.log(outTradeNo);
      // 保存订单号
      localStorage.setItem('outTradeNo', outTradeNo);
      this.$router.push({ name: 'PaymentPage' });
    },
  },
  computed: {
    totalPrice() {
      let total = 0;
      this.orderList.forEach(item => {
        total += item.price * item.num;
      });
      return total;
    },
  },
};
</script>

<style lang="scss" scoped>
.order_confirmation_info {
  display: flex;
  align-items: center;
  padding: 10px;
  position: relative;
  gap: 10px;

  .icon {
    width: 30px;
    height: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .arrow {
    margin-left: auto;
  }

  .info {
    flex: 1;
    margin: 0 10px;

    .author {
      font-size: 16px;
      font-weight: 600;
      color: #333;
    }

    .phone {
      font-size: 14px;
      color: #999;
    }
  }

  &::before {
    content: '';
    position: absolute;
    right: 0;
    bottom: 0;
    left: 0;
    height: 2px;
    background: repeating-linear-gradient(
      -45deg,
      #ff6c6c 0,
      #ff6c6c 20%,
      transparent 0,
      transparent 25%,
      #1989fa 0,
      #1989fa 45%,
      transparent 0,
      transparent 50%
    );
    background-size: 80px;
  }

  .add_btn {
    width: 45px;
    height: 45px;
    background-color: #3488ff;
    border-radius: 10px;
  }

  .address {
    font-size: 14px;
    color: #999;
  }
}

.card_list {
  .card_list_item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px;
    background-color: #fafafa;
    margin-top: 8px;

    .img {
      width: 90px;
      height: 90px;
      background-color: #ccc;
      border-radius: 10px;

      img {
        width: 100%;
        height: 100%;
        object-fit: cover;
      }
    }

    .info {
      flex: 1;
      margin: 0 10px;

      .name {
        font-size: 16px;
        font-weight: 600;
        color: #333;
        margin-bottom: 10px;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
      }

      .desc {
        font-size: 14px;
        color: #999;
        margin-bottom: 10px;
      }

      .price {
        font-size: 16px;
        font-weight: 600;
        color: #ff6c6c;
      }

      .num {
        display: flex;
        align-items: center;
        justify-content: flex-end;
        font-size: 16px;
        font-weight: 600;
        color: #ccc;
      }
    }
  }
}

.footer {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 999;
  height: 80px;
  display: flex;
  align-items: center;
  justify-content: end;
  padding: 10px;
  background-color: #fafafa;
  gap: 10px;

  .total {
    font-size: 16px;
    font-weight: 600;
    color: #333;

    .total_price {
      font-size: 16px;
      font-weight: 600;
      color: #ff6c6c;
    }
  }

  .btn {
    width: 120px;
    height: 40px;
    background-color: #ee132b;
    border-radius: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
    font-weight: 600;
    color: #fff;
  }
}
</style>
